import { getToken, setToken, removeToken } from '@/utils/auth'
import { getLoginApi, getUserInfoApi } from '@/api/user'
import { Message } from 'element-ui'
import router from '@/router'
import { constantRoutes, resetRouter } from '@/router'

const getDefaultState = () => {
  return {
    token: getToken(),
    userInfo: {},
    // 存放的是路由
    routes: constantRoutes
  }
}

const state = getDefaultState()

const mutations = {
  // 1.存token
  SET_STOKEN(state, token) {
    // 1.1 往本地存储token
    setToken(token)
    // 1.2 往state存储token,也是相当于往vuex中
    state.token = token
  },
  // 2. 删除token
  REMOVE_TOKEN(state) {
    // 2.1 删除token
    removeToken()
    state.token = null
  },
  // 3. 存用户信息
  SET_USERINFO(state, userInfo) {
    state.userInfo = userInfo
  },
  // 4. 删除用户信息
  CLARA_USER_INFO(state) {
    state.userInfo = ''
  },
  // 存路由
  SET_ROUTES(state, newRouter) {
    state.routes = [...constantRoutes, ...newRouter] // 静态路由 + 动态路由
  }
}

const actions = {
  // user login
  async login(context, { mobile, password }) {
    const token = await getLoginApi({ mobile, password })
    console.log(token)
    // 将返回的 token 通过 commit 提交到 Vuex 的 mutation SET_STOKEN 中，以更新 Vuex 的状态。
    // 为什么这里直接就会返回token值，因为使用了getLoginApi是由封装的axios
    // 它响应返回的是token，使用了解构数据,直接点点到了data，在接口中存储token
    context.commit('SET_STOKEN', token)
    Message.success('登录成功~')
    router.replace('/')
  },
  // 退出登录
  async logout(context) {
    // 清除token
    context.commit('REMOVE_TOKEN')
    // 清除用户信息
    context.commit('CLARA_USER_INFO')
    // 清除路由的信息
    resetRouter()
  },
  // 请求用户信息
  async getUserInfo(context) {
    const res = await getUserInfoApi()
    // 存储用户信息
    context.commit('SET_USERINFO', res)
    console.log(res)
    return res
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

